<div class="kuiSideBarSection">

  <div class="kuiSideBarFormRow">
    <label class="kuiSideBarFormRow__label" for="percentageMode">
      Percentage Mode
    </label>
    <div class="kuiSideBarFormRow__control">
      <input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="vis.params.metric.percentageMode">
    </div>
  </div>

  <div class="kuiSideBarFormRow">
    <label class="kuiSideBarFormRow__label" for="showLabels">
      Show Labels
    </label>
    <div class="kuiSideBarFormRow__control">
      <input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="vis.params.metric.labels.show">
    </div>
  </div>

  <div>
    <div class="kuiSideBarCollapsibleTitle">
      <div
        kbn-accessible-click
        aria-expanded="{{!!showColorRange}}"
        aria-controls="metricOptionsRanges"
        aria-label="Toggle range options"
        class="kuiSideBarCollapsibleTitle__label"
        ng-click="showColorRange = !showColorRange"
      >
      <span
        aria-hidden="true"
        ng-class="{ 'fa-caret-down': showColorRange, 'fa-caret-right': !showColorRange }"
        class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
      ></span>
        <span class="kuiSideBarCollapsibleTitle__text">
        Ranges
      </span>
      </div>
    </div>

    <div id="metricOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
      <div class="kuiSideBarSection">
        <table class="vis-editor-agg-editor-ranges form-group" ng-show="vis.params.metric.colorsRange.length">
          <tr>
            <th scope="col">
              <label id="metricOptionsCustomRangeFrom">From</label>
            </th>
            <th scope="col" colspan="2">
              <label id="metricOptionsCustomRangeTo">To</label>
            </th>
          </tr>

          <tr ng-repeat="range in vis.params.metric.colorsRange track by $index">
            <td>
              <input
                aria-labelledby="metricOptionsCustomRangeFrom"
                ng-model="range.from"
                type="number"
                class="form-control"
                name="range.from"
                greater-or-equal-than="{{getGreaterThan($index)}}"
                required
                step="any" />
            </td>
            <td>
              <input
                aria-labelledby="metricOptionsCustomRangeTo"
                ng-model="range.to"
                type="number"
                class="form-control"
                name="range.to"
                greater-or-equal-than="{{range.from}}"
                required
                step="any" />
            </td>
            <td>
              <button
                type="button"
                ng-click="removeRange($index)"
                ng-show="vis.params.metric.colorsRange.length > 1"
                class="kuiButton kuiButton--danger kuiButton--small">
                <i class="fa fa-times"></i>
              </button>
            </td>
          </tr>
        </table>

        <div class="hintbox" ng-show="!vis.params.metric.colorsRange.length">
          <p>
            <i class="fa fa-danger text-danger"></i>
            <strong>Required:</strong> You must specify at least one range.
          </p>
        </div>

        <div
          ng-click="addRange()"
          class="kuiButton kuiButton--primary kuiButton--fullWidth">
          Add Range
        </div>
      </div>
    </div>
  </div>
  <div ng-show="vis.params.metric.colorsRange.length > 1">
    <div class="kuiSideBarCollapsibleTitle">
      <div
        kbn-accessible-click
        aria-expanded="{{!!showColorOptions}}"
        aria-controls="metricOptionsColors"
        aria-label="Toggle color options"
        class="kuiSideBarCollapsibleTitle__label"
        ng-click="showColorOptions = !showColorOptions"
      >
      <span
        aria-hidden="true"
        ng-class="{
        'fa-caret-down': showColorOptions,
        'fa-caret-right': !showColorOptions
        }"
        class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
      ></span>
        <span class="kuiSideBarCollapsibleTitle__text">
        Color Options
      </span>
      </div>
    </div>
    <div id="metricOptionsColors" ng-if="showColorOptions" class="kuiSideBarCollapsibleSection">
      <div class="kuiSideBarSection">
        <div class="kuiSideBarFormRow" ng-show="vis.params.metric.colorsRange.length > 1">
          <label class="kuiSideBarFormRow__label" for="metricColorMode">
            Use Color For
          </label>
          <div class="kuiSideBarFormRow__control">
            <select
              id="metricColorMode"
              class="kuiSelect kuiSideBarSelect"
              ng-model="vis.params.metric.metricColorMode"
              ng-options="mode for mode in collections.metricColorMode"
            ></select>
          </div>
        </div>
        <div class="kuiSideBarFormRow" ng-show="vis.params.metric.metricColorMode !== 'None'">
          <label class="kuiSideBarFormRow__label" for="colorSchema">
            Color Schema
          </label>
          <div class="kuiSideBarFormRow__control">
            <select
              id="colorSchema"
              class="kuiSelect kuiSideBarSelect"
              ng-model="vis.params.metric.colorSchema"
              ng-options="mode for mode in collections.colorSchemas"
            ></select>
          </div>
          <div class="text-info text-center" ng-show="customColors" ng-click="resetColors()">reset colors</div>
        </div>

        <div class="kuiSideBarFormRow"  ng-show="vis.params.metric.metricColorMode !== 'None'">
          <label class="kuiSideBarFormRow__label" for="invertColors">
            Reverse Color Schema
          </label>
          <div class="kuiSideBarFormRow__control">
            <input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="vis.params.metric.invertColors">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div>
    <div class="kuiSideBarCollapsibleTitle">
      <div
        kbn-accessible-click
        aria-expanded="{{!!showStyle}}"
        aria-controls="metricOptionsStyle"
        aria-label="Toggle style options"
        class="kuiSideBarCollapsibleTitle__label"
        ng-click="showStyle = !showStyle"
      >
        <span
          aria-hidden="true"
          ng-class="{
          'fa-caret-down': showStyle,
          'fa-caret-right': !showStyle
          }"
          class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
        ></span>
        <span class="kuiSideBarCollapsibleTitle__text">
          Style
        </span>
      </div>
    </div>
    <div id="metricOptionsStyle" ng-if="showStyle" class="kuiSideBarCollapsibleSection">

      <div class="kuiSideBarSection">

        <div class="kuiSideBarFormRow">
          <label class="kuiSideBarFormRow__label" for="metricFontSize">
            Font Size (<span ng-bind="vis.params.metric.style.fontSize"></span>pt)
          </label>
          <div class="kuiSideBarFormRow__control">
            <input id="metricFontSize" type="range" ng-model="vis.params.metric.style.fontSize" class="form-control" min="12" max="120" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
